<template>
	<div class="sc_tab">
		<div :class="['item', { active: active === item.name }]" :style="active === item.name ? tplActiveStyles : tplStyles" v-for="(item, index) in items" :key="index" @click="handleClick(item)">
			{{ item.label }}
		</div>
	</div>
</template>
<script setup>
import { ref, defineProps, defineEmits, computed } from "vue"

const props = defineProps({
	items: {
		type: Array,
		requirs: true,
		default: () => []
	},
	active: {
		type: String,
		default: () => ""
	},
	size: {
		type: Number,
		default: () => 14
	},
	currentSize: {
		type: Number,
		default: () => 16
	},
	currentColor: {
		type: String,
		default: () => ""
	}
})

const tplStyles = computed(() => {
	return {
		fontSize: `${props.size}px`
	}
})
const tplActiveStyles = computed(() => {
	return {
		fontSize: `${props.currentSize}px`,
		color: props.currentColor
	}
})

const emit = defineEmits(["onSelect"])

const handleClick = (payload) => {
	emit("onSelect", payload)
}
</script>
<style lang="scss">
.sc_tab {
	display: flex;
	font-size: 14px;
	font-weight: bold;
	color: #666666;
	.item {
		padding: 0px 10px;
		cursor: pointer;
		position: relative;
		&::after {
			content: "";
			position: absolute;
			top: 50%;
			right: 0px;
			transform: translateY(-50%);
			width: 1px;
			height: 16px;
			background-color: #e6e6e6;
		}
		&:last-child {
			&::after {
				width: 0px;
			}
		}
		&.active {
			color: #f05a5a;
			font-size: 16px;
		}
	}
}
</style>
